<template>
    <view class="p-l-r">
        <template v-for="row in dataRows" :key="row.id">
            <view class="log-item">
                <view>订单号：<Text user-select>{{ row.orderNo }}</Text><nut-tag class="m-l-10" :type="status(row.status)">{{ PAY_STATUS[row.status] }}</nut-tag></view>
                <view class='m-t-10'>充值金额：<Text>{{ row.amount }}元</Text></view>
                <view class='m-t-10' v-if="row.rewardAmount > 0">赠送金额：<Text>{{ row.rewardAmount }}元</Text></view>
                <view class='m-t-10'>充值时间：{{ parseTime(row.createTime) }}</view>
            </view>
        </template>
    </view>
    <LoadMore key-name="id" :api="rechargeRecord" @finish="page" />
</template>

<script lang="ts" setup>
    import { rechargeRecordApi } from '@/api/ChargingCard';
    import LoadMore from '@/components/LoadMore/index.vue'
    import { parseTime } from '@/utils';
    import { useRouter } from '@/utils/framework'
    import { PAY_STATUS } from '@/constant'
    import { ref } from 'vue';
    
    function status(s) {
        if(s == 0) {
            return 'danger'
        }

        if(s == 1) {
            return 'success'
        }

    }

    const router = useRouter()


    const cardId = Number(router.params.id)
    

    const dataRows = ref<any[]>([])

    function rechargeRecord(params) {
        return rechargeRecordApi({...params, cardId})
    }

    function page(rows:any[]) {
        dataRows.value.push(...rows)
    }



</script>

<style lang="scss" src="./index.scss"></style>